<template>
	<view class="content">
		<view class="top">
			<image src="../../static/img/share/wx.png" mode="aspectFit"></image>
			<view>提现至微信</view>
		</view>

		<view class="box">
			<view class="input_area">
				<u-input style="flex: 1" v-model="money" clear placeholder="输入金额" type="number" placeholder-style="font-size: 36upx;font-weight: 400;" :custom-style="customStyle"
				 @input="bindPickerChange" />
			</view>
			<view style="display: flex;flex-direction: row;padding: 42upx 0;align-items: center;justify-content: space-between;">
				<view style="color: #909090;font-size: 28upx;">可提现金额¥ <span style="padding: 0 4upx">{{ accountBalance }}</span>元</view>
				<view @click="selectAll" style="color: #666666;font-size: 30upx;font-weight: bold;" hover-class="opacity7"> 全部提现</view>
			</view>
		</view>
		
		<button :loading='loading' :disabled="btnDisabled" class="mocup_btn btn" @click="$u.throttle(tixian, 500)">确认提现</button>

	</view>
</template>

<script>
	import { isBlank } from '@/utils/common.js'
	
	export default {
		data() {
			return {
				customStyle: {
					fontSize: '36upx',
					fontWeight: 'bold',
					width: "100%"
				},
				money: '', // 提现金额
				accountBalance: 0.00,
				loading: false,
				btnDisabled: true
			}
		},
		watch: {
			money(val) {
				if (isBlank(this.money) || this.money === 0) {
					this.btnDisabled = true
				} else {
					this.btnDisabled = false
				}
			},
		},
		onLoad() {
			this.searchWallet()
		},
		methods: {
			bindPickerChange: function(e) {
				this.money = e
			},
			searchWallet() {
				this.$u.api.getMyAssets().then(res => {
					uni.stopPullDownRefresh();
					if(res.code === 200) {
						this.accountBalance = res.data.accountBalance
					}
				})
			}, 
			selectAll() {
				this.money = this.accountBalance
			}, 
			tixian() {
				if(this.money > this.accountBalance) {
					uni.showToast({
						title: "提现金额不能大于可提现余额",
						icon: 'none'
					})
				}
				
				var data = {
					amount: Number(this.money)
				}
				
				this.$u.api.withdrawal().then(res => {
					if (res.code === 200) {
						uni.showToast({
							icon: "success",
							title: "提现成功"
						})
						this.accountBalance = this.accountBalance - this.money
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		position: relative;
		background-color: #F7F8FA;
		height: 100%;
	}

	.line {
		width: 100%;
		height: 1px;
		color: #e7e7e7;
	}


	.content {
		padding: 32upx 0 0 0;

		.top {
			display: flex;
			padding: 32upx 40upx;
			font-weight: bold;
			font-size: 30upx;
			color: #666666;
			align-items: center;

			image {
				width: 63upx;
				height: 63upx;
				margin-right: 24upx;
			}
		}

		.box {
			margin-top: 36upx;
			background: white;
			border-radius: 8upx;
			padding: 47upx 44upx 42upx 44upx;

			.title {
				font-size: 28upx;
				color: #000000;
				font-weight: bold
			}
		}

		.input_area {
			padding: 42upx 0;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #e7e7e7;
		}

		.btn {
			width: 690upx;
			height: 90upx;
			line-height: 90upx;
			margin: 0 auto;
			color: white;
		}
		

	}
</style>
